<!-- 菜单 -->
<template>
  <el-menu :collapse="isCollapse"
           :default-active="$route.path"
           class="el-menu-vertical-demo"
           background-color="#001529"
           text-color="#fff"
           active-text-color="#ffd04b">
    <div class="logo">
      <img src="../../assets/logo.png" />
      <span v-show="!isCollapse">藤田MES</span>
    </div>

    <label v-for="item1 in menu"
           :key="item1.id">
      <el-menu-item v-if="item1.children.length===0"
                    :index="item1.url"
                    :key="item1.url"
                    @click="clickMenu(item1.url)">
        <i :class="item1.icon" />
        <span>{{ item1.name}}</span>
      </el-menu-item>

      <el-submenu v-else-if="item1.children.length>0"
                  :index="
                  item1.url"
                  :key="item1.url">
        <template #title>
          <i :class="item1.icon" />
          <span>{{ item1.name }}</span>
        </template>
        <el-menu-item :index="item2.url"
                      v-for="item2 in item1.children"
                      :key="item2.url"
                      @click="clickMenu(item2.url)">
          {{ item2.name }}
        </el-menu-item>
      </el-submenu>
    </label>
  </el-menu>
</template>

<script>
export default {
  name: 'CommonAside',
  computed: {
    isCollapse () {
      return this.$store.state.isCollapse
    }
  },
  data () {
    return {
      menu: JSON.parse(this.$store.state.userName),
      aaa: false
    }
  },
  methods: {
    // 跳转路由
    clickMenu (item) {
      this.$router.push(item)
    }
  }
}
</script>

<style lang="less" scoped>
// 点击背景
.el-menu-item.is-active {
  background-color: #263142 !important;
}

.el-menu-vertical-demo .el-submenu__title {
  height: 50px;
}
.el-menu-vertical-demo {
  height: 100vh;
  background: #07133d;
}
.el-menu {
  border: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

/* 菜单顶部-展开,收缩 */
.logo {
  overflow: hidden;
  height: 49px;
  width: 100%;
  line-height: 39px;
  img {
    margin-left: 16px;
    width: 35px;
    height: 30px;
    vertical-align: middle;
  }
  span {
    position: relative;
    top: 3px;
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
    margin: 0 0 0 18px;
  }
}
</style>
